<template>
  <div class="process-pane">
    <div
      v-for="item in result"
      :key="item.id"
      class="process-pane-item mb-4"
      :class="'deadline-' + item.submitTime"
    >
      <div class="base-title">
        <div>办理期限：{{ item.deadlineDate }}</div>
        <div>报送人：{{ item.submitUserName }}</div>
        <div>
          报送时间：{{
            formatDateStr(item.submitTime, 'YYYY年MM月DD日 HH:mm:ss')
          }}
        </div>
        <div>
          <span>当前状态：</span>
          <MatterHandleShow :status="item.status" />
        </div>
      </div>
      <FileTable :model-value="item.audioDataList" />
      <h1 class="title">办理总结：</h1>
      <div class="px-2 py-4 whitespace-pre">{{ item.completionDesc }}</div>
      <h1 class="title">办理情况：</h1>
      <div class="px-4">
        <ApproveRecords :approveRecords="item.processInfoList" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ApproveRecords from '@/components/approve/ApproveRecords.vue'
import { onMounted, ref } from 'vue'
import { getFeedbackByMatterIdAndUnitId } from '@/api/mission/process'
import FileTable from '@/components/file/FileTable.vue'
import { formatDateStr } from '@/plugins/date'
import MatterHandleShow from '@/components/statusShow/matterHandle/MatterHandleShow.vue'

const { matterId, unitId } = defineProps<{
  matterId?: number
  unitId?: number
}>()

const result = ref([])

async function getFeedback() {
  const { data } = await getFeedbackByMatterIdAndUnitId({
    matterId,
    unitId,
  })
  if (data.status === 200) {
    result.value = data.data
  }
}

defineExpose({ setData })

function setData(data: any) {
  result.value = data
}

onMounted(async () => {
  if (matterId && unitId) {
    await getFeedback()
  }
})
</script>

<style scoped>
.title {
  padding: 8px 16px;
  margin: 8px 0;
  font-size: 18px;
  background: rgb(236, 245, 255);
  font-weight: 600;
}

.base-title {
  padding: 16px;
  font-size: 14px;
  color: #fff;
  background-color: #409eff;
  @apply flex items-center;
  gap: 10px 20px;
}
</style>
